<template>
  <div class="public-info-container">
    <h2>公益信息管理</h2>
    
    <el-tabs v-model="activeTab">
      <!-- 公益机构管理 -->
      <el-tab-pane label="公益机构管理" name="institution">
        <el-button type="primary" @click="showInstitutionDialog('add')">新增机构</el-button>
        <el-table :data="institutions" style="width: 100%">
          <el-table-column prop="name" label="机构名称"></el-table-column>
          <el-table-column prop="type" label="机构类型"></el-table-column>
          <el-table-column prop="contact" label="联系方式"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="showInstitutionDialog('edit', scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteInstitution(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 政策管理 -->
      <el-tab-pane label="政策管理" name="policy">
        <el-button type="primary" @click="showPolicyDialog('add')">新增政策</el-button>
        <el-table :data="policies" style="width: 100%">
          <el-table-column prop="title" label="政策标题"></el-table-column>
          <el-table-column label="申请链接">
            <template slot-scope="scope">
              <el-link type="primary" :href="scope.row.link" target="_blank">访问链接</el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="showPolicyDialog('edit', scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deletePolicy(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 机构编辑对话框 -->
    <el-dialog :title="institutionDialog.title" :visible.sync="institutionDialog.visible">
      <el-form :model="institutionForm" label-width="100px">
        <el-form-item label="机构名称">
          <el-input v-model="institutionForm.name"></el-input>
        </el-form-item>
        <el-form-item label="机构类型">
          <el-select v-model="institutionForm.type" placeholder="请选择">
            <el-option 
              v-for="item in institutionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="institutionForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="机构地址">
          <el-input v-model="institutionForm.address"></el-input>
        </el-form-item>
        <el-form-item label="机构简介">
          <el-input type="textarea" v-model="institutionForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="institutionDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="saveInstitution">保存</el-button>
      </div>
    </el-dialog>

    <!-- 政策编辑对话框 -->
    <el-dialog :title="policyDialog.title" :visible.sync="policyDialog.visible">
      <el-form :model="policyForm" label-width="100px">
        <el-form-item label="政策标题">
          <el-input v-model="policyForm.title"></el-input>
        </el-form-item>
        <el-form-item label="政策内容">
          <el-input type="textarea" v-model="policyForm.content"></el-input>
        </el-form-item>
        <el-form-item label="申请链接">
          <el-input v-model="policyForm.link"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="policyDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="savePolicy">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PublicInfoManagement',
  data() {
    return {
      activeTab: 'institution',
      institutions: [
        { id: 1, name: '中国红十字会', type: '综合救助', contact: '010-64048222', address: '北京市东城区北新桥三条8号', description: '全国性人道救助组织' },
        { id: 2, name: '中华慈善总会', type: '医疗救助', contact: '010-66083260', address: '北京市西城区二龙路甲33号', description: '专注于医疗救助的慈善组织' }
      ],
      policies: [
        { id: 1, title: '大病医疗救助政策', content: '针对重大疾病患者提供医疗费用补助，最高可补助10万元。', link: 'http://www.gov.cn/medical-aid' },
        { id: 2, title: '低保家庭救助政策', content: '为低收入家庭提供基本生活保障，每月补助金额根据地区标准不同。', link: 'http://www.gov.cn/low-income' }
      ],
      institutionTypes: [
        { value: '综合救助', label: '综合救助' },
        { value: '医疗救助', label: '医疗救助' },
        { value: '教育救助', label: '教育救助' },
        { value: '扶贫救助', label: '扶贫救助' }
      ],
      institutionDialog: {
        visible: false,
        title: '',
        mode: 'add'
      },
      institutionForm: {
        id: '',
        name: '',
        type: '',
        contact: '',
        address: '',
        description: ''
      },
      policyDialog: {
        visible: false,
        title: '',
        mode: 'add'
      },
      policyForm: {
        id: '',
        title: '',
        content: '',
        link: ''
      }
    }
  },
  methods: {
    // 机构相关方法
    showInstitutionDialog(mode, row) {
      this.institutionDialog.mode = mode;
      this.institutionDialog.title = mode === 'add' ? '新增公益机构' : '编辑公益机构';
      
      if (mode === 'edit') {
        this.institutionForm = JSON.parse(JSON.stringify(row));
      } else {
        this.resetInstitutionForm();
      }
      
      this.institutionDialog.visible = true;
    },
    saveInstitution() {
      // 这里应该调用API保存数据
      if (this.institutionDialog.mode === 'add') {
        // 模拟新增
        this.institutions.push({
          ...this.institutionForm,
          id: this.institutions.length + 1
        });
      } else {
        // 模拟更新
        const index = this.institutions.findIndex(item => item.id === this.institutionForm.id);
        if (index !== -1) {
          this.institutions.splice(index, 1, this.institutionForm);
        }
      }
      this.institutionDialog.visible = false;
      this.$message.success('保存成功');
    },
    deleteInstitution(id) {
      this.$confirm('确定要删除该机构吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API删除数据
        this.institutions = this.institutions.filter(item => item.id !== id);
        this.$message.success('删除成功');
      });
    },
    resetInstitutionForm() {
      this.institutionForm = {
        id: '',
        name: '',
        type: '',
        contact: '',
        address: '',
        description: ''
      };
    },
    
    // 政策相关方法
    showPolicyDialog(mode, row) {
      this.policyDialog.mode = mode;
      this.policyDialog.title = mode === 'add' ? '新增救助政策' : '编辑救助政策';
      
      if (mode === 'edit') {
        this.policyForm = JSON.parse(JSON.stringify(row));
      } else {
        this.resetPolicyForm();
      }
      
      this.policyDialog.visible = true;
    },
    savePolicy() {
      // 这里应该调用API保存数据
      if (this.policyDialog.mode === 'add') {
        // 模拟新增
        this.policies.push({
          ...this.policyForm,
          id: this.policies.length + 1
        });
      } else {
        // 模拟更新
        const index = this.policies.findIndex(item => item.id === this.policyForm.id);
        if (index !== -1) {
          this.policies.splice(index, 1, this.policyForm);
        }
      }
      this.policyDialog.visible = false;
      this.$message.success('保存成功');
    },
    deletePolicy(id) {
      this.$confirm('确定要删除该政策吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API删除数据
        this.policies = this.policies.filter(item => item.id !== id);
        this.$message.success('删除成功');
      });
    },
    resetPolicyForm() {
      this.policyForm = {
        id: '',
        title: '',
        content: '',
        link: ''
      };
    }
  }
}
</script>

<style scoped>
.public-info-container {
  padding: 20px;
}
.el-tabs {
  margin-top: 20px;
}
.el-button {
  margin-bottom: 15px;
}
</style>